$(function(){
    load();
    //存储数据格式 {title:'卢本伟牛逼',done:true,},{title:'卢本伟捞逼',done:false,}
    $('#title').on('keydown',function(e){
        if(e.keyCode == 13){
            // alert('1');
            //读取本地存储原有数据
            var localInf = getData();
            // console.log(localInf);
            //给数组追加数据
            localInf.push({title:$(this).val(),done:false});
            setData(localInf);
            $(this).val('');
            //
            load();
        }
    });

    //读取本地原有数据
    function getData(){
        var data = localStorage.getItem('todolist');
        if(data != null){
            return JSON.parse(data);
        }else{
            return [];
        }
    }

    //保存更新后的数据
    function setData(data){
        localStorage.setItem('todolist',JSON.stringify(data));
    }

    //渲染加载数据
    function load(){
        var data = getData();
        var todocount = 0;
        var donecount = 0;
        //清空ol
        $('ol,ul').empty();
        //遍历数组
        $.each(data,function(i,n){
            if(n.done){
                $('ul').prepend("<li><input type='checkbox' checked><p>  " + n.title + "  </p><a href='javascript:;' id="+i+"></a></li>");
                donecount++;
            }else{
                $('ol').prepend("<li><input type='checkbox'><p>  " + n.title + "  </p><a href='javascript:;' id="+i+"></a></li>");
                todocount++;
            }
        })
        $("#todocount").text(todocount);
        $("#donecount").text(donecount);
    }

    //删除操作
    $("ol,ul").on("click","a",function(){
        //获取本地存储
        var data = getData();
        //修改数据
        var index = $(this).attr("id");
        data.splice(index,1);
        setData(data);
        load();
    })

    //未完成和已完成
    $("ol,ul").on("click","input",function(){
        //获取本地存储
        var data = getData();
        //修改数据
        var index = $(this).siblings("a").attr("id");
        data[index].done = $(this).prop("checked");
        //保存到本地存储
        setData(data);
        load();
    })

    //清空全部
    $("footer>a").on("click",function(){
        var data = getData();
        //获取长度
        data.splice(0,data.length);
        setData(data);
        load();
    })
})